<template>

  <client-only>
    <div class="in-wrap">
      <!-- 公共头引入 -->
      <header id="header">
        <section class="container">
          <h1 id="logo">
            <a href="#" title="智慧教育">
              <img src="~/assets/img/logo.png" width="100%" alt="智慧教育">
            </a>
          </h1>
          <div class="h-r-nsl">
            <ul class="nav">
              <router-link to="/" tag="li" active-class="current" exact>
                <a>首页</a>
              </router-link>
              <router-link to="/course" tag="li" active-class="current">
                <a>课程</a>
              </router-link>
              <router-link to="/teacher" tag="li" active-class="current">
                <a>名师</a>
              </router-link>
              <router-link to="/article" tag="li" active-class="current">
                <a>文章</a>
              </router-link>
            </ul>
            <!-- / nav -->
            <ul class="h-r-login">
              <!-- 这里报警告  -->
              <li v-if="!loginInfo.id" id="no-login">
                <a href="/login" title="登录">
                  <em class="icon18 login-icon">&nbsp;</em>
                  <span class="vam ml5">登录</span>
                </a>
                |
                <a href="/register" title="注册">
                  <span class="vam ml5">注册</span>
                </a>
              </li>
              <li v-if="loginInfo.id" id="is-login-one" class="mr10">
                <a id="headerMsgCountId" href="#" title="消息">
                  <em class="icon18 news-icon">&nbsp;</em>
                </a>
                <q class="red-point" style="display: none">&nbsp;</q>
              </li>
              <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
                <a href="/user" title>
                  <img
                    :src="loginInfo.avatar"
                    width="30"
                    height="30"
                    class="vam picImg"
                    alt
                  >
                  <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
                </a>
                <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
              </li>
              <!-- /未登录显示第1 li；登录后显示第2，3 li -->
            </ul>
            <aside class="h-r-search">
              <form action="#" method="post">
                <label class="h-r-s-box">
                  <!--                <input type="text" placeholder="输入你想学的课程" name="queryCourse.courseName" value>-->
                  <el-col :span="30" >
                    <el-autocomplete
                      class="inline-input"
                      v-model="searchCourseValue"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入内容"
                      :popper-append-to-body="false"
                    >
                    </el-autocomplete>
                  </el-col>
                  <button type="submit" class="s-btn" style="margin-top: 5px;margin-left: 5px" @click="queryCourse()">
                    <em class="icon18">&nbsp;</em>
                  </button>
                </label>
              </form>
            </aside>
          </div>
          <aside class="mw-nav-btn">
            <div class="mw-nav-icon"/>
          </aside>
          <div class="clear"/>
        </section>
      </header>

      <!-- /公共头引入 -->
      <nuxt/>

      <!-- 公共底引入 -->
      <footer id="footer">
        <section class="container">
          <div class>
            <h4 class="hLh30">
              <span class="fsize18 f-fM c-999">友情链接</span>
            </h4>
            <ul class="of flink-list">
              <li>
                <a href="http://www.atguigu.com/" title="智慧在线教育" target="_blank">智慧在线教育</a>
              </li>
            </ul>
            <div class="clear"/>
          </div>
          <div class="b-foot">
            <section class="fl col-7">
              <section class="mr20">
                <section class="b-f-link">
                  <a href="#" title="关于我们" target="_blank">关于我们</a>|
                  <a href="#" title="联系我们" target="_blank">联系我们</a>|
                  <a href="#" title="帮助中心" target="_blank">帮助中心</a>|
                  <a href="#" title="资源下载" target="_blank">资源下载</a>|
                  <span>服务热线：010-56253825(北京) 0755-85293825(深圳)</span>
                  <span>Email：info@atguigu.com</span>
                </section>
                <section class="b-f-link mt10">
                  <span>©2018课程版权均归智慧在线教育所有 京ICP备17055252号</span>
                </section>
              </section>
            </section>
            <aside class="fl col-3 tac mt15">
              <section class="gf-tx">
              <span>
                <img src="assets/img/wx-icon.png" alt>
              </span>
              </section>
              <section class="gf-tx">
              <span>
                <img src="assets/img/wb-icon.png" alt>
              </span>
              </section>
            </aside>
            <div class="clear"/>
          </div>
        </section>
      </footer>
      <!-- /公共底引入 -->
    </div>
  </client-only>
</template>
<script>

  import '~/assets/css/reset.css'
  import '~/assets/css/theme.css'
  import '~/assets/css/global.css'
  import '~/assets/css/web.css'
  import '~/assets/css/base.css'
  import '~/assets/css/activity_tab.css'
  import '~/assets/css/bottom_rec.css'
  import '~/assets/css/nice_select.css'
  import '~/assets/css/order.css'
  import '~/assets/css/swiper-3.3.1.min.css'
  import "~/assets/css/pages-weixinpay.css"
  import cookie from 'js-cookie'
  import login from "../api/login";
  import course from "../api/course";

  export default {
    data() {
      return {
        token: '',
        loginInfo: {
          id: '',
          age: '',
          avatar: '',
          email: '',
          nickname: '',
          sex: ''
        },//用户信息

        courseLists: [],
        searchCourseValue: '',//模糊查询名称
      }
    },
    mounted(){

    },
    created() {
      this.loadAll();
      //获取路径里面token值
      this.token = this.$route.query.token;
      if (this.token) {//判断路径中是否有token值
        this.wxLogin();
      } else {
        this.showInfo();
      }


    },
    methods: {
      //模糊查询课程
      queryCourse(){
        this.$router.push({
          path:"/course",
          query:{
            searchCourseValue:this.searchCourseValue
          }
        })
      },

      //查询所有的课程
      loadAll() {
        course.queryCourseList()
          .then(resp=>{
            this.courseLists = resp.data.data.courseList;
          })
      },
      querySearch(queryString, cb) {
        var courseLists = this.courseLists;
        var results = queryString ? courseLists.filter(this.createFilter(queryString)) : courseLists;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (course) => {
          return (course.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      //退出方法
      logout() {
        //清空cookie的值
        cookie.set('edu_token', '')
        cookie.set('edu_ucenter', '');
        //回到首页面
        window.location.href = '/';
      },

      //创建方法，从cookie获取用户信息
      showInfo() {
        //从cookie中获取用户信息
        var userStr = cookie.get("edu_ucenter");

        //把字符串转换json对象
        if (userStr) {
          //console.log("eeee:"+userStr)
          var userStrJson = JSON.parse(userStr);
          //console.log("111:"+JSON.parse(userStr));
          this.loginInfo = userStrJson;
          //this.loginInfo = userStr;
        }
      },
      //微信登录方法
      wxLogin() {
        //把token值放入cookie中
        cookie.set("edu_token", this.token);
        cookie.set("edu_ucenter", '');
        //调用接口，根据token值获取用户信息
        login.getLoginUserInfo()
          .then(resp => {
            this.loginInfo = resp.data.data.userInfo;
            cookie.set("edu_ucenter", JSON.stringify(this.loginInfo));
          })
      },



    }
  }
</script>
<style>
  .el-popper[x-placement^=bottom]{
    width:400px !important;
  }
  .h-r-s-box input {
    width: 250px;
    height: 40px;

  }
  .h-r-s-box input:focus {
    width: 280px;
    height: 40px;
  }
</style>
